<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/my_style.css">

    <!-- 用于引入外部html -->
    <script src="../js/include.js"></script>

    <!-- 图标文件 -->
    <script src="../js/feather.min.js"></script>

    <!-- echarts + bmap 依赖 -->
    <script src="../js/echarts.js"></script>
    <script src="../js/bmap.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=k8qty39Yu17dSx7WFqejVIO1snGRGtFf"></script>

    <!-- jQuery -->
    <script src="../js/jquery-3.4.1.min.js"></script>

    <script type="text/javascript" src="//api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>
    <script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>

    <style type="text/css">
        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
            float: left;
        }

        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            font-family: "微软雅黑";
        }


        #tl {
            width: 60px;
            height: 370px;
            position: absolute;
            /*这里一定要设置*/
            z-index: 999999;
            /*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
            top: 25%;
            margin-left: 0px;
            margin-bottom: 80%;
            background-image: url("../img/tidu.png");
            -webkit-transition: .5s ease-in-out;
            /* css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态 */
            -moz-transition: .5s ease-in-out;
            /*这里为了兼容其他浏览器*/
            -o-transition: .5s ease-in-out;
            background-image: url("../img/tidu.png");
        }

        #accordion {
            position: absolute;
            top: 20%;
            right: 2%;

        }

        #time {
            position: absolute;
            margin-left: 0%;
            top: 12%;
            width: 195px;
            height: 25px;
            background-color: #d1ecf1;
            border-style: solid;
            border: #1b1e21;
            border: 20px;
            font-size: 15px;
        }

    </style>


    <title>热力图</title>
</head>

<body>
<!-- 共用的navbar -->
<include src="navbar.html"></include>

<div class="container-fluid">
    <div class="row">
        <!-- 共用的sidebar -->
        <include src="sidebar.html"></include>
        <!-- 主要内容 -->
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            <div class="row">
                <div id="container" class="" style="width: 1500px;height: 625px;margin-top: 24px;"></div>
            </div>
            <div id="tl">
            </div>
            <div id="time">
                <p id="date">16:51:48 | 每1.5秒自动刷新</p>
            </div>
            <div id="accordion" style="width: 200px; height:500px">
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseOne">
                            Top1
                        </a>
                    </div>
                    <div id="collapseOne" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="1">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                            Top2
                        </a>
                    </div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="2">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
                            Top3
                        </a>
                    </div>
                    <div id="collapseThree" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="3">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseFour">
                            Top4
                        </a>
                    </div>
                    <div id="collapseFour" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="4">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseFive">
                            Top5
                        </a>
                    </div>
                    <div id="collapseFive" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="5">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseSix">
                            Top6
                        </a>
                    </div>
                    <div id="collapseSix" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="6">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseSeven">
                            Top7
                        </a>
                    </div>
                    <div id="collapseSeven" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="7">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseEight">
                            Top8
                        </a>
                    </div>
                    <div id="collapseEight" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="8">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseNine">
                            Top9
                        </a>
                    </div>
                    <div id="collapseNine" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="9">正在请求</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        <a class="card-link" data-toggle="collapse" href="#collapseTen">
                            Top10
                        </a>
                    </div>
                    <div id="collapseTen" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <p id="10">正在请求</p>
                        </div>
                    </div>
                </div>
            </div>
        <script src="../js/index.js"></script>
        </main>
    </div>
</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>

</html>